<script>
	export default{
		data(){
			return{
				name:'张三',
				htmlStr:'<h2>网页代码</h2>',
				num:'3',
				num1:5,
				show:false,
				seen:true,
				attrName:'class',
				aName:'person'
				
			}
		},
		methods:{
			changeName(){
				this.name='李四'
			},
			changeNum1(){
				this.num1++
			}
		}
	}

</script>

<template>
	
	 <!--插值 文本-->
	 <h1>{{name}}</h1>
	 
	 <!--插值 HTML-->
	 <span>{{htmlStr}}</span>
	 <span v-html="htmlStr"></span>
	 
	 <!--插值 属性id name style css-->
	 <h2 v-bind:id="num">属性插值</h2>
	 <h2 :id="num">属性插值2</h2>
	 
	 <!-- 动态-->
	  <h2 v-bind:[attrName]="aName">动态参数</h2>
	 
	 <!-- 插值 使用JS表达式-->
	 <h2>{{num1+1}}</h2>
	 <h2>{{show ? "yes":"no"}}</h2>
	 
	 <!--指令 v-XX  -->
	 <p v-if="seen">现在你能看到我了</p>
	 <button v-on:click="changeName">点击改名</button>
	 <button @click="changeNum1">+</button>
 
</template>

<style>

</style>
